import React, { Component } from 'react'
import {SearchWrap} from './search.js'
import {withRouter} from 'react-router-dom'
import {get} from '../../utils/http'
import lodash from 'lodash'
import {Icon} from 'antd-mobile'
class Search extends Component {
    constructor(){
        super()
        this.state={
            list:[]
        }
    }

    handleinput = (()=>{
        let that=this     
        let func = lodash.throttle(async function(e){
            let value=e.target.value
            let result=await get(`https://m.tuniu.com/api/search/Association?d={"keyword":"${value}"}`)    
            console.log(result.data.data.list);               
            that.setState({
             list:result.data.data.list
            })  
        }, 2000)
        return function(e){
        e.persist();
        func(e);
        }
        })()

        handleclick=async (value)=>{
            console.log(value);          
            let key=value.keyName
            let id=value.keyId
            let result=await get(`https://m.tuniu.com/travel/mapi/search/getSearchList?bookCity=200&bookCityName=北京&limit=20&paramType=1&keyword=${key}&tabKey=whole&locateCityCode=200&searchKeys=[]&pageNum=1&newSaleChannels=[]&_=1576288393003080196724656628970`)          
         //console.log(result.data.data.list);    
         let flag=0 
         this.props.history.push({pathname: `/hotcity/${key}/${id}/${flag}`, state: { data:result.data.data}})   
        }
    componentDidMount(){
      
    
    }
    render() {
        return (
            <SearchWrap>
            <header>
                <span>取消</span>
              <input  onChange={this.handleinput}
               type="text"/>
              <em><Icon type="search" /></em>
            </header>
            <div className="hotsearch">
                <p>搜索</p>
                <ul>
                   {
                       this.state.list.map((value,index)=>{
                           return (
                           <li onClick={() => {
                               this.handleclick(value)
                           }
                           }>{value.keyName}</li>
                           )
                       })
                   }
                </ul>
            </div>
           
            </SearchWrap>
        )
    }
}
export default  withRouter(Search) 